import React from 'react'
import { ImagePicker } from 'antd-mobile'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      cardImg1: null,
      cardimg2: null
    }
  }
  componentDidMount () {
    if (T.get('__uploadicon1').querySelector('input')) {
      T.get('__uploadicon1').querySelector('input').setAttribute('capture', 'camcorder') // microphone  camcorder  camera   accept="video/*"
      T.get('__uploadicon1').querySelector('input').setAttribute('accept', 'video/*')
    }
    if (T.get('__uploadicon2').querySelector('input')) {
      T.get('__uploadicon2').querySelector('input').setAttribute('capture', 'camcorder')
      T.get('__uploadicon2').querySelector('input').setAttribute('capture', 'video/*')
    }
  }

  onImgChange (index, files = [], type) {
    this.setState({
      ['cardImg' + index]: files[0].url
    })
  }

  cardClick (index) {
    if (this.props.step !== 1) {
      return
    }
    let dom = T.get('__uploadicon' + index).querySelector('input')
    T.autoClick(dom)
  }

  render () {
    const {cardImg1, cardImg2} = this.state
    const {step} = this.props
    return (
      <div className='upload'>
        <div className='name'>上传持有香港身份证照</div>
        <div className='content clearfix p-relative tac'>
          <div className='img-box mr30' onClick={this.cardClick.bind(this, 1)}>
            <img src={cardImg1 || '/assets/images/card1.png'} alt='' className='card-img' />
            {step === 1 &&
            <img className='camera' src='/assets/images/product/camera.png' alt='' />
            }

            <label>正面</label>
          </div>
          <div className='img-box' onClick={this.cardClick.bind(this, 2)}>
            <img src={cardImg2 || '/assets/images/card2.png'} alt='' className='card-img' />
            {step === 1 &&
            <img className='camera' src='/assets/images/product/camera.png' alt='' />
            }
            <label>反面</label>
          </div>

          <div className='upload-hide-box'>
            <div id='__uploadicon1'>
              <ImagePicker
                files={[]}
                onChange={this.onImgChange.bind(this, 1)}
                selectable
              />
            </div>
            <div id='__uploadicon2'>
              <ImagePicker
                files={[]}
                onChange={this.onImgChange.bind(this, 2)}
                selectable
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default App
